<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
          body{
            margin: 0;
            padding: 0;
            border: 0;
          }
          .fl{
            float: left;
          }
          .fr{
            float: right;
          }
          .main{
            width: 100%;

            background-color: rgba(243,243,243,0.5);
            position: fixed;
            top:1.5rem;
          }
          .pic{
            width: 100%;
            height: 14rem;

          }
          .pic_img{
            width: 100%;
            height:14rem;
            background-color: black
            /*margin-top: 2rem;*/

          }
          .pic_img img{
            width: 100%;
            height: 100%;
          }
          .pic_img_r{
            width: 25%;
            height: 5.5rem;
            margin-right: 0rem;
            position: relative;
          }
          .pic_r{
            width: 100%;
            height: 100%;
          }
          .pic_r img{
            width: 100%;
            height: 100%;
          }
          .pic_bot{
            position: absolute;
            bottom: 0%;
            width: 100%;
            margin: 0 auto;
            height: 1.5rem;
            line-height: 1.5rem;
            z-index: 999;
            background-color: rgb(0, 0, 0, 0.3);
            color:#fff;
          }
          .pic_bot p{
            color: #fff;
            width: 60%;
            float: left;
            font-size:0.6rem;
          }
          .mei{
            width: 25%;
            height: 0.8rem;
            /*line-height: 1rem;*/
            margin-left: 0.1rem;
            /*margin-top: 0.3rem;*/
          }
          .mei img{
            width: 100%;
            height: 100%;
          }
          .nav{
            width: 93%;
            padding: 0.5rem 0.8rem;
            height: 3rem;
            background-color: #fff;
            font-size: 0.85rem;
            line-height: 1.5rem;
          }
          .nav_list{
            width: 93%;
            padding: 0.5rem 0.8rem;
            font-size: 0.85rem;
            height: 100%;
            position: fixed;
            overflow: hidden;
            background-color: rgba(243,243,243,0.5);
          }
          .footer{
            width: 93%;
            padding: 0.5rem 0.8rem;
            height: 3.5rem;
            position: fixed;
            bottom: 0%;
            background-color: #fff;
          }
          .footer_text{
            width: 65%;
            line-height: 3rem;
            padding-left: 0.5rem;
            height:3rem;
            border-radius: 0.5rem;
            margin:0.1rem 0.3rem 0rem 0.3rem;
            background-color: rgba(243,243,243,0.5);
          }
          .footer_text input{
            width: 90%;
            outline: none;
            color: #ccc;
          }
          #txt{
            background: url(../image/happy.png) center right;
            background-size:10% 100%;
            background-repeat: no-repeat;
            padding-right: 0.5rem;
          }
          .footer_right{
            width: 28%;
            height: 3rem;
            margin-top: 0.5rem;
          }
          .right_one{
            width: 44%;
            height: 100%;
            margin-left: 0.3rem;
          }
          .one_img{
            width:70%;
            height: 1.7rem;
            margin:0 auto;
          }
          .one_img img{
            width: 100%;
            height: 100%;
            text-align: center;
          }
          .right_one p{
            width: 120%;
            /*text-align: center;*/
            margin-left: 0.5rem;
            font-size: 0.72rem;
            margin-top: 0.2rem;
          }
          .Navbtn {
              background-color: #44dc12;
              color: #fff;
              padding: 5px;
              border-radius: 5px;
              position: absolute;
              right: 5px;
              top: 10px;
          }
      </style>
  </head>
  <body>
    <div class="main">
      <div class="pic">
        <div class="pic_img fl" id="vide_s">
          <!-- <video poster=""src="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4" width="100%" height="100%" controls >



          </video> -->
        </div>
        <!-- <div class="pic_img_r fr">
          <div class="pic_r">
            <img src="../image/u33.png" alt="">
          </div>
          <div class="pic_bot">
            <div class="mei fl">
              <img src="../image/meigui.png" alt="">
            </div>
            <p>鲜花数:0</p>
          </div>
        </div> -->
      </div>
      <!-- 内容 -->
      <div class="nav">
        <p id="titles"></p>
        <!-- <p>不要分心哦</p> -->
        <p>每天都要专心学习</p>
      </div>
      <div class="nav_list" id="say_list">
        <p id="name"></p>
        <button class="Navbtn" onclick="closedPiu()">返回</button>
      </div>
      <div class="footer">
        <div class="footer_text fl">
          <button class="txt" onclick="dialog()">说两句呗</button>
          <!--<input type="text" name="" placeholder="说两句呗~" id="txt">
           <img src="../image/happy.png" style="width:2rem;height:2rem"> -->
        </div>
        <div class="footer_right fl">
          <div class="right_one fl" onclick="opense()">
            <div class="one_img" style="margin-left:0.5rem;">
              <img src="../image/book.png" alt="">
            </div>
            <p style="margin-left:0rem;">在售课程</p>
          </div>
          <div class="right_one fl fa" id="fa" style="display:none;">
            <p onclick="sendRoomTextMessage()" style="margin-left:-0.2rem;background-color:#40cccc;color:#fff;height:1.7rem;border-radius:0.8rem;text-align:center;line-height:1.7rem;font-size:0.9rem;margin-top:0.2rem;">发送</p>
          </div>
          <div class="right_one fl" onclick="js()">
            <div class="one_img">
              <img src="../image/shou.png" alt="">
            </div>
            <p>举手</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  var userinfo = $api.getStorage('userinfo');
  var mecshop
  var id =''
  var room
  var uname

    apiready = function(){
      id = api.pageParam.id
      uname=userinfo.nick_name;
      //$("#name").html(userinfo.nick_name+'进入了直播间');
      qiniuLive = api.require('qiniuLive');

      get_liste();


      // setTimeout(function () {
      //     fninitPMediaPlayer();
      // }, 3000);
      qiniuLive.addEventListener({
        name: 'status'
      }, function(ret) {
        if (ret.status == 2) {
          qiniuLive.start(function(ret) {
            ///alert(JSON.stringify(ret));
          });
        }
      });
      //聊天socket连接
      connect();
    };

function js() {
  $("#say_list").append('<p style="color:red">我正在举手</p>')
}
function opense() {
  api.openWin({
      name: 'brand',
      url: './brand.html',
      pageParam: {
          id: mecshop
      }
  });
}
    function get_liste() {

      var html =''
      var obj = $api.byId('vide_s');

      api.ajax({
          url: SITE_URL+'cur_api/curlive/get_videos',
          method: 'post',
          data: {
              values: {
                  id: id
              }
          }
      },function(ret, err){
          if (ret) {

            //mecshop = ret.data.cur_id
            mecshop = ret.data.mecshop
            room=ret.data.room_id

            if(ret.data.start==2){
              alert('您的课程已完结')
              api.closeWin({

              });
            }else if(ret.data.start==0){

              alert('课程暂未开始,请到时间后重进,您的上课时间:'+ret.data.start_time);
              html +='<video poster="'+ret.data.img_url+'"src="" width="100%" height="100%" controls ></video>'
              //mecshop = ret.data.cur_id
            //  alert(ret.data.looklive)
              $("#titles").html(ret.data.title)
            }else{
              html +='<video poster="'+ret.data.img_url+'"src="'+ret.data.links+'" width="100%" height="100%" controls ></video>'
            //  mecshop = ret.data.cur_id

              $("#titles").html(ret.data.title)
            }
          //  alert('mecshop' + mecshop)
      //      $("#img_img").attr('src',ret.data.img_url)


          //  alert(html)

            $api.html(obj, html);

            // alert( JSON.stringify( ret ) );
          } else {
            //  alert( JSON.stringify( err ) );
          }
      });

    }
    function closedPiu() {
      api.historyBack({
       },function(ret,err){
           if (!ret.status) {
               api.closeWin();
           }
      });
    };
  function dialog() {
    api.openFrame({
      name: 'dialog',
      url: './dialog.html',
      rect: {
        x:0,
        y:0,
        w:api.winWidth,
        h:api.winHeight
      },
      bgColor: 'rgba(0,0,0,0.6)',
      bounces: false,
      pageParam: {
                  kename: 'videos' //店铺id
              }
    });
  };

  //聊天 start

  function connect() {
    // 创建一个 websocket 连接
    ws = new WebSocket("ws://47.93.186.254:9238");
    // websocket 创建成功事件
    ws.onopen = onopen;
    // websocket 接收到消息事件
    ws.onmessage = onmessage;
    ws.onclose = onclose;
    ws.onerror = onerror;
  }

  function onopen()
  {
    var data = "系统消息：建立连接成功";
    console.log(data);
  }

  function onmessage(e)
  {
    var data = JSON.parse(e.data);
    switch (data.type) {
      case 'handShake':
        console.log(data.msg);
        //发送用户登录
        var user_info = {'type': 'login', 'msg': userinfo.nick_name, 'headerimg': userinfo.head_img, 'room': room};
        sendMsg(user_info);
        break;
      case 'login':
        //userList(data.user_list);
        systemMessage('系统消息: ' + data.msg + ' 已上线');
        break;
      case 'logout':
        //userList(data.user_list);
        if (data.msg.length > 0) {
          systemMessage('系统消息: ' + data.msg + ' 已下线');
        }
        break;
      case 'user':
        messageList(data);
        break;
      case 'system':
        systemMessage();
        break;
    }
  }
  function onclose()
  {
    console.log("连接关闭，定时重连");
    connect();
  }

  // websocket 错误事件
  function onerror()
  {
    var data = "系统消息 : 出错了,请退出重试.";
    console.log(data);
  }

  function confirm(event) {
    var key_num = event.keyCode;
    if (13 == key_num) {
      //send();
      console.log('send error, key_num');
    } else {
      return false;
    }
  }

  function systemMessage(msg) {
    /*
    var html = `<div class="conversation-start">
        <span>` + msg + `</span>
    </div>`;
    var active_chat = document.querySelector('div.active-chat');
    var oldHtml = active_chat.innerHTML;
    active_chat.innerHTML = oldHtml + html;
    active_chat.scrollTop = active_chat.scrollHeight;
    */

    //alert( JSON.stringify( msg ) );
    $("#say_list").append('<p>' + msg + '</p>')

  }

  function sendContent(msg) {
    // var msg = document.querySelector("input#input-value").value;
    //var room = Math.round(Math.random() * 2);

    var reg = new RegExp("\r\n", "g");
    console.log('room:' + room);
    msg = msg.replace(reg, "");

    sendMsg({type: "user", msg: msg});
    //document.querySelector("input#input-value").value = "";
  }

  function sendMsg(msg) {
    var data = JSON.stringify(msg);
    ws.send(data);
  }

  function userList(user) {
    var html = '';
    for (var i = 0; i < user.length; i++) {
      html += `<li class="person" data-chat="person1">
                    <img src="` + user[i].headerimg + `" alt=""/>
                    <span class="name">` + user[i].username + `</span>
                    <span class="time">` + user[i].login_time + `</span>
                    <span class="preview" style="color: green;font-size: 7px;">在线</span>
                </li>`;
    }
    document.querySelector('ul.people').innerHTML = html;
    document.querySelector('span#numbers').innerHTML = user.length;
  }

  function messageList(data) {
    /*
    if (data.from == uname) {
      var html = `<div class="message">
                    <img class="me-header" src="` + data.headerimg + `" alt=""/>
                    <div class="bubble me">` + data.msg + `</div>
                </div>`;
    } else {
      var html = `<div class="message">
                    <img src="` + data.headerimg + `" alt=""/>
                    <div class="bubble you">` + data.msg + `</div>
                </div>`;
    }
    var active_chat = document.querySelector('div.active-chat');
    var oldHtml = active_chat.innerHTML;
    active_chat.innerHTML = oldHtml + html;
    active_chat.scrollTop = active_chat.scrollHeight;
    */

   $("#say_list").append('<p>' + userinfo.nick_name + ':' + data.msg + '</p>')
  }

  //聊天 end

  </script>
  </html>
